<template>
    <!-- 添加仓库页 -->
    <div>
        <el-card class="box-card">
            <el-form :model="formData" label-position="left" label-width="100px" size="medium" @submit.native.prevent>
                <div class="static-content-item">
                    <div>基础信息</div>
                </div>
                <div class="static-content-item">
                    <el-divider direction="horizontal"></el-divider>
                </div>
                <el-row style="margin-top: 20px;">
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库编号" prop="ware_code" class="required label-center-align">
                            <el-input v-model="formData.ware_code" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库名称" prop="ware_name" class="required label-center-align">
                            <el-input v-model="formData.ware_name" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库容量" prop="ware_cap" class="required label-center-align">
                            <el-input v-model="formData.ware_cap" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库主管" prop="ware_duty_man" class="required label-center-align">
                            <el-input v-model="formData.ware_duty_man" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库地址" prop="ware_adr" class="required label-center-align">
                            <el-input v-model="formData.ware_adr" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="排序" prop="sort_code" class="required label-center-align">
                            <el-input v-model="formData.sort_code" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="仓库锁定" prop="is_lock" class="required label-center-align">
                            <el-input v-model="formData.is_lock" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <div class="static-content-item">
                <div>库位信息</div>
            </div>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div style="margin-bottom: 10px;">
                            <el-button class="custom-button" @mouseover="hover = true" @mouseout="hover = false"
                            @click="xinzeng()">新增</el-button>
                            <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                                @click="onSubmit">导出</el-button>
                            <el-button class="custom-button2" @click="onSubmit">导入</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
               <!-- 新增 -->
      <el-drawer title="新增" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
        <el-form :inline="true" :model="formInline" class="demo-form-inline2" :label-position="labelPosition">
            <el-form-item label="库位编号" class="Selected">
                <el-input  v-model="formInline.area_code" readonly placeholder="请输入" class="SInput"></el-input >
            </el-form-item>
            <el-form-item label="库位名称" class="Selected">
                <el-input v-model="formInline.area_name" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="库位容量/m³" class="Selected">
                <el-input v-model="formInline.area_cap" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="库位主管" class="Selected">
                <el-input v-model="formInline.area_duty_man" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="库位状态" class="Selected">
                <template>
                    <el-radio v-model="formInline.area_state" label="1" value="1">启用</el-radio>
                    <el-radio v-model="formInline.area_state" label="0" value="0">停用</el-radio>
                </template>
            </el-form-item>
            <br>
            <el-form-item label="排序" class="Selected">
                <el-input v-model="formInline.sort_code" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <br>
            <el-form-item>
                <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false" @click="onSubmit"
                    style=" background-color: #79828a;color: #FFF;">取消</el-button>
                <el-button class="custom-button" @click="bc()">保存</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    <!-- 修改 -->
    <el-drawer title="修改" :visible.sync="drawerxg" :direction="direction" :before-close="handleClose">
        <el-form :inline="true" :model="formInline" class="demo-form-inline2" :label-position="labelPosition">
            <el-form-item label="库位编号" class="Selected">
                <el-input v-model="formInline.area_code" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="库位名称" class="Selected">
                <el-input v-model="formInline.area_name" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="库位容量" class="Selected">
                <el-input v-model="formInline.area_cap" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="库位主管" class="Selected">
                <el-input v-model="formInline.area_duty_man" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <el-form-item label="排序" class="Selected">
                <el-input v-model="formInline.sort_code" placeholder="请输入" class="SInput"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="状态" class="Selected">
                <template>
                    <el-radio v-model="formInline.area_state" label="1" value="1">启用</el-radio>
                    <el-radio v-model="formInline.area_state" label="0" value="0">停用</el-radio>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false" @click="onSubmit"
                    style=" background-color: #79828a;color: #FFF;">取消</el-button>
                <el-button class="custom-button" @click="xg()">保存</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
            <el-form :model="input">
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 1500px"
                @selection-change="handleSelectionChange">
                <!-- 左边固定 -->
                <el-table-column fixed type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="编号" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_code"  label="库位编号" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_name" label="库位名称" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="sort_code" label="排序" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_cap" label="库位容量" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_duty_man" label="库位主管" width="150" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_state" label="库位状态" width="150" align="center">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="dark" v-if="scope.row.area_state == 0">停用
                        </el-tag>
                        <el-tag type="primary" effect="dark" v-if="scope.row.area_state == 1">启用
                        </el-tag>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="110px" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="Delect(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-form>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="rows">
            </el-pagination>
            <div class="static-content-item">
                <el-divider direction="horizontal"></el-divider>
            </div>
        </el-card>
      
        <div class="footer-nav">
            <el-row style="float: right;">
                <!-- 底部导航栏内容 -->
                <router-link to="Product information">
                    <el-button size="small">关闭</el-button>
                </router-link>
                <el-button size="small" @click="AddSupplier()">保存并新增</el-button>
                <el-button size="small" @click="Insertuser()" type="primary">保存</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
import $http from '../http/base.js'
export default {
    components: {},
    props: {},
    data() {
        return {
            //Item分页查询
            currentPage: 1,
            rows: 1,
            pageSize: 3,
            //Orderbuy分页查询
            currentPageo: 1,
            rowso: 1,
            pageSizeo: 3,
            Orderbuycx: [],
            dialogVisible: false,
            formData: {
                is_lock: "",
                ware_code: "",
                ware_name: "",
                ware_cap: "",
                ware_duty_man: "",
                ware_adr: '',
                sort_code: '',
                model_code: "",
                outbill_price: "",
                inbill_price: "",
                item_up: '',
                item_down: '',
                below_down: "",
                above_up: "",
                unit: "",
                is_del: 0
            }, formInline: {
                area_code:"",
                area_name:"",
                area_cap:"",
                area_duty_man:"",
                sort_code:"",
                area_state:"",
                item_code: "",
                unit: "",
            },
            drawer: false,
            drawerxg: false,
            input: {
                dw: "",
                hpsl: "",
                jhdj: "",
                bz: "",
                je: ""
            },
            tableData: [],
            tableDataxz: [],
            value1: '',
            value2: '',
            areaid:[],
        }
    },
    computed: {},
    watch: {},
    
    created() { },
    mounted: function () {
        this.RandomID();
        this.Orderbuy();
        this.fill();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        RandomID() {//生成随机供应商编码
            // 定义一个函数生成编码
            function generateCode() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const fixedLetters = 'CKBH';
                return fixedLetters + year + month + day + hours + minutes + seconds;
            }
            // 使用函数生成编码
            const randomCode = generateCode();
            console.log(randomCode); // 示例打印：20231129113510Y
            this.formData.ware_code = randomCode
        },
        xinzeng(){
            this.RandomID1()
            this.drawer = true;
        },
        RandomID1() {//生成随机供应商编码
            // 定义一个函数生成编码
            function generateCode() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const fixedLetters = 'KWBH';
                return fixedLetters + year + month + day + hours + minutes + seconds;
            }
            // 使用函数生成编码
            const randomCode = generateCode();
            console.log(randomCode); // 示例打印：20231129113510Y
            this.formInline.area_code = randomCode
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        BaoCun(){
            this.Insertuser()
            this.KWXG()
        },
        //https://localhost:7020/api/Bs_WareAreaControllers/wareAdd库位信息添加
        Insertuser() {
            $http.post('https://localhost:7020/api/bs_warehouseControllers/ItemAdd', this.formData)
                .then((res) => {
                    alert("新增成功！")
                    console.info(res)
                })
                .catch((err) => {
                    alert("新增失败！")
                    console.info(err);
                });
        }, 
        KWXG() {
            this.Huoqvxinxi()
            $http.post('api/bs_warehouseControllers/KWUpdate?warecode='+this.formData.ware_code, this.areaid)
                .then((res) => {
                    alert("新增成功！")
                    console.info(res)
                })
                .catch((err) => {
                    alert("新增失败！")
                    console.info(err);
                });
        }, 
         MakeTime() {//时间
          let yy = new Date().getFullYear();
          let mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1);
          let dd = (new Date().getDate()) < 10 ? '0' + (new Date().getDate() + 1) : (new Date().getDate() + 1);
          let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
          let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
          let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
          this.formInline.create_time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      },
        handleClick(row) {//编辑
          console.log(row);
          this.drawerxg = true;
          this.MakeTime();
          $http.get('https://localhost:7020/api/Bs_WareAreaControllers/ItemTypeSelectid?id=' + row.id)
              .then((res) => {
                  console.log("id查询结果为" + row.id);
                  this.formInline.id = res.id;
                  this.formInline.area_code = res.area_code;
                  this.formInline.area_name = res.area_name;
                  this.formInline.area_cap = res.area_cap;
                  this.formInline.area_duty_man = res.area_duty_man;
                  this.formInline.sort_code = res.sort_code;
                  this.formInline.area_state = res.area_state;
                  this.formInline.create_time = res.create_time;
              })
      },
      xg() {//修改
          this.MakeTime();
          $http.post('https://localhost:7020/api/Bs_WareAreaControllers/ItemTypeUpdate', this.formInline
          ).then(res => {
              alert("修改成功")
              this.fill();
              console.log(res)
          })
              .catch(err => {
                  console.log(err);
              })
      },
      Delect(row) {//逻辑删除is_del=0
          $http.post("https://localhost:7020/api/Bs_WareAreaControllers/ItemtypeUDelect?id=" + row.id)
              .then((res) => {
                  console.log("供应商逻辑删除返回数据:" + res);
                  alert("删除成功！");
                  this.fill();
              })
      },
        bc() {//保存
          $http.post("https://localhost:7020/api/Bs_WareAreaControllers/wareAdd", this.formInline)
              .then((res) => {
                  alert("新增成功！")
                  this.formInline.area_code = "",
                      this.formInline.area_name = "",
                      this.formInline.area_cap = "",
                      this.formInline.area_duty_man = "",
                      this.formInline.sort_code = "",
                      this.formInline.area_state = "",
                      this.create_by="admin"
                  console.info(res)
                  this.fill();
              })
              .catch((err) => {
                  alert("新增失败！")
                  console.info(this.formData);
                  console.info(err.response);
              });
      },
      //获取多选中的编号,状态
      Huoqvxinxi() {
              this.areaid = [];//存储序号(id)
              const selectedRows = this.$refs.AdateMZ.selection; // 获取选中的行数据
              const data = selectedRows.map(row => { return { '序号': row.id }; });//获取序号
  
              for (let i = 0; i < data.length; i++) {
                  this.Idbh.push(data[i]['序号']);
              }
              console.log('序号：' + this.areaid);
          },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {//固定列表
            this.multipleSelection = val;
            console.log(val);
        }, 
       toggleSelection(rows) {//新增里的全选
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        }, cz() {//重置
            this.formInline.unit = "";
            this.formInline.item_code = "";
        },
        handleSizeChange(pageSize) {//分页
            this.pageSize = pageSize;
            this.currentPage = 1;
            console.log(this.pageSize);
            this.Orderbuy();
        },
        handleCurrentChange(currentPage) {//分页
            this.currentPage = currentPage;
            console.log(this.currentPage);
            this.Orderbuy();
        }, handleSizeChangeo(pageSizeo) {//Orderbuy分页
            this.pageSizeo = pageSizeo;
            this.currentPageo = 1;
            console.log(this.pageSizeo);
            this.fill();
        },
        handleCurrentChangeo(currentPageo) {//Orderbuy分页
            this.currentPageo = currentPageo;
            console.log(this.currentPageo);
            this.fill();
        }, fill() {   
            var tj = "1=1";
            const token = localStorage.getItem('token');
            $http.post("https://localhost:7020/api/Bs_WareAreaControllers/bs_Item_FenYe?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage + "&str=" + tj + "")
                .then((res) => {
                    console.log(res.list);
                    this.tableData = res.list;
                    this.rows = res.count;
                }).catch((err) => {
                    alert('错误2')
                    console.log(err);
                });
      }, 
        Orderbuy() {
            var tj = "1=1";
            const token = localStorage.getItem('token');
            $http.post("https://localhost:7020/api/Bs_WareAreaControllers/bs_Item_FenYe?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage + "&str=" + tj + "")
                .then((res) => {
                    console.log(res.list);
                    this.tableData = res.list;
                    this.rows = res.count;
                }).catch((err) => {
                    alert('错误2')
                    console.log(err);
                });
        }
    }
}
</script>


<style scoped>
el-input
{
width: 200px;
    
}
.footer-nav {
    position: fixed;
    bottom: 0;
    right: 0px;
    height: 40px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    float: right;
}

.footer-nav a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

.footer-nav a:hover {
    color: #000;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 100%;
    margin: auto;
}
</style>
<style scoped>
.el-input-number.full-width-input,
.el-cascader.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}
</style>

<style>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

.label-left-align ::v-deep .el-form-item__label {
    text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
    text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
    text-align: right;
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
        margin: 0;
    }
}

.Selected {
    display: inline-block;
}

.SInput {
    width: 190px;
}

</style>